<template>
  <div class="app-container">
    <div style="display:inline ">

<div class='zengzhong_div'>
			<div class='divLeft_'>
				<div class='div_weight_y contrast div_weight_3'>
					<div class='standard after'>{{childHeightDetailData.currentInheritHeight.value}}cm</div>
					<div style="color:#fff">正常</div>
					<div class='now_high after' style="width: 120px;" v-if="childHeightDetailData.measuredHeight.value >= childHeightDetailData.currentInheritHeight.value" :style="'bottom:'+(childHeightDetailData.measuredHeight.value - childHeightDetailData.currentInheritHeight.value)/20*100>100?100:(childHeightDetailData.measuredHeight.value - childHeightDetailData.currentInheritHeight.value)/20*100+'%'">
						<img class='sanjiao_' src="@/assets/icon_images/zx.png"> 
						<div class='now' style="color: #75ce3e;" >
							<div class='nowSize'  style="width: 190px;">{{childHeightDetailData.measuredHeight.value}}cm</div> 
						</div>
					</div>
				</div>
				<div class='div_weight_p contrast div_weight_31'>
					<div style="color:#fff">偏低</div>
					<div class='now_high after' style="width: 120px;" v-if="childHeightDetailData.measuredHeight.value < childHeightDetailData.currentInheritHeight.value" :style="'top:'+(childHeightDetailData.currentInheritHeight.value-childHeightDetailData.measuredHeight.value)/8*100>96?0:(childHeightDetailData.currentInheritHeight.value-childHeightDetailData.measuredHeight.value)/8*100+'%'">
						<img class='sanjiao_' src="@/assets/icon_images/zx_4.png"> 
						<div class='now'>
							<div class='nowSize' style="width: 190px;">{{childHeightDetailData.measuredHeight.value}}cm</div> 
						</div>
					</div>
				</div>
			</div>
		</div>

    </div>

    <el-tag
      v-if="childHeightDetailData.measuredHeight.value>childHeightDetailData.currentInheritHeight.value"
      type="success"
    >正常</el-tag>
    <el-tag v-else type="info">偏低</el-tag>
<p></p>


    <div class='explain'  v-if="childHeightDetailData.measuredHeight.value<childHeightDetailData.currentInheritHeight.value">您孩子后天生长环境不利长高。请从孩子饮食、睡眠、运动、情绪等方面排查。加强后天因素管理，不仅有利发挥遗传高度，还可能让孩子成年身高比遗传高10cm以上。\n 注：孩子打呼噜会严重影响长高，请尽早就医。
		</div>
		<div class='explain' v-else >您孩子后天生长环境有利长高。请从孩子饮食、睡眠、运动、情绪等方面保持。加强后天因素管理，不仅有利发挥遗传高度，还可能让孩子成年身高比遗传高10cm以上。</div>
	</div>
 
</template>

<style >
 
/* pages/rediv/rediv.wxss */
.container{
  background: #faf9fc;
}
.sjx_icon{
  width: 0; 
  height: 0;
  border-width: 16px;
  border-style: solid;
  position:absolute;
  right:-16px;
  bottom:52px;
}
.tab_row .th{
  width: 25%;
  height: 60px;
}
.tab_row .td{
  width: 25%;
}
.chooseDate{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  font-size: 28px;
}
.chooseDate>div{
  display: flex;
  justify-content: center;
  align-items: center;
}
.dateFirst{
  width: 122px;
  height: 38px;
  font-size: 22px;
  color: #83c628;
  border: 1px solid #83c628;
  border-radius: 5px;
}
.dateFirst.bg,.dateTwo.bg{
  color: #fff;
  background: #83c628
}
.zeng_box{
  display: flex;
  justify-content: space-between;
  margin: 30px 0 5px;
}
.zeng_box .t1{
  font-size: 25px;
  line-height: 1.9;
  padding-left:61px;

}
.zeng_box .btn{
  padding:6px 16px;
  font-size: 22px;
  color: #83c628;
  margin-left: 20px;
  border: 1px solid #83c628;
  border-radius: 5px;
}
.zeng_box .btn.bg{
  color: #fff;
  background: #83c628
}
.dateTwo{
  width: 125px;
  height: 40px;
  font-size: 22px;
  color: #83c628;
  border: 1px solid #83c628;
  border-radius: 5px;
}
.recCon{
  display: flex;
  align-items: center;
}
.chooseDate image{
  width: 40px;
  margin-left: 5px;
}
.t_head{
  border: 1px solid #83c728;
}
.t_body .tr{
  border: 1px solid #83c728;
}
.t_body .tr{
  border-top: none;
}
.tab_clum .th{
  border-right: 1px solid #83c728;
}
.tab_clum .th:nth-child(3){
  border-right: none;
}
.t_body .td{
  border-right: 1px solid #83c728;
}
.t_body .td:nth-child(3n){
  border-right: none;
}
.t_body .th{
  border-right: 1px solid #83c728;
}
.tab_row .t_head:nth-child(2){
  border-top: none;
}
.tab_row .td:nth-child(4n){
  border-right: none;
}
.tab_row .td{
  border-right: 1px solid #83c728;
}
.tab_row .th{
  border-right: 1px solid #83c728;
}
.th{
  background: #e6f4d4;
  font-size: 24px;
  color: #4b4b4b;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}
.td{
  font-size: 24px;
  color: #4b4b4b;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 20px;
}
.t_head{
  display: flex;
}
.tab{
  padding: 48px 30px;
  background: #ffffff;
}
.tab_clum .th{
  width: 33.3%;
  height: 60px;
}
.tab_clum .td{
  width:33.3%;
  height: 60px;
}
.tab_clum{
  margin-top: 45px;
}
.tr{
  display: flex;
}
.left{
  padding-left: 40px;
}
.right{
  padding-left: 0;
  justify-content: center;
}
.center{
  padding: 0;
  justify-content: center;
}
.realHigh{
  margin-top: 20px;
  background: #ffffff;
  box-sizing: border-box;
  padding: 32px 32px 105px;
}
.realTitle{
  display: block;
  font-size: 38px;
  color: #3b3b3b;
  font-weight: bold;
}
.realSize{
  font-size: 38px;
  color: #3b3b3b;
  font-weight: bold;
}
.stutas{
  padding: 0 10px;
  font-size: 20px;
  color: #67c62c;
  border: 1px solid #67c62c;
  text-align: center;
  border-radius: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}
.high{
  display: flex;
  align-items: flex-end;
  padding-bottom: 20px;
  border-bottom: 1px solid #efefef;
  position: relative;

}
.chart_bottom{
  font-size: 22px;
  color: #a7a6a6;
  text-align: center;
}
.chart1_info {
  margin-top: 64px;
  font-size: 26px;
  color: #4b4b4b;
  padding:0 26px;
  border-left:2px solid #67c62c;
}
.chart1_info2 {
  padding:44px 26px 0;
  font-size: 26px;
  line-height:1.6;
  color: #a7a6a6;
}
.chart1_info text{
  margin-bottom: 20px;
  display: block;
}

.infomation{
  position: absolute;
  width: 22px;
  height: 22px;
  right:0;
  overflow:auto;
  bottom: 10px;
  padding: 20px;
}
.highdiv{
  display: flex;
  flex-direction: column;
  font-size: 22px;
  color: #ffffff;
  align-items: center;
}
.piangao{
  width: 100px;
  background: #2cb9c6;
  text-align: center;
  color: #2cb9c6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jiaogao{
  width: 100px;
  background: #2cc69d;
  text-align: center;
  color: #2cc69d;
    display: flex;
  align-items: center;
  justify-content: center;
}
.zhengchang{
  width: 100px;
  background: #67c62c;
  text-align: center;
  color: #67c62c;
    display: flex;
  align-items: center;
  justify-content: center;
}
.pianai{
  width: 100px;
  background: #9dc62c;
  text-align: center;
  color: #9dc62c;
    display: flex;
  align-items: center;
  justify-content: center;
}
.aixiao{
  width: 100px;
  background: #fead37;
  text-align: center;
  color: #fead37;
    display: flex;
  align-items: center;
  justify-content: center;
}
.shiji{
    margin-left: 280px;
}
.contrast{
  position: relative;
}
.zhixiang_{
  display: flex;
  align-items: center;
  position: absolute;
  left: 10px;
  bottom: 0;
  height: 0;
}
.zhixiang_ .now{
  margin-top: -5px;
}
.zhixiang{
  width: 300px;
  position: relative;
}
.highInfo{
  display: flex;
    margin: 80px 0;
}
.contrast>text{
  color: #ffffff;
}
.standard{
  position: absolute;
  bottom: 0;
  left: -200px;
  width: 200px;
  font-size: 26px;
  color: #6d6d6d;
  border-bottom: 1px solid #e9e9e9;
  line-height:30px;
  display: flex;
  box-sizing: border-box;
  padding-left: 20px;
}
.standard.after{
  font-size:42px;
  color:#4b4b4b;
  line-height:55px;
  padding-left:0;
}
.standard.after:after{
  content: '遗传身高';
  position: absolute;
  top:-48px;
  left: 0;
  color: #9c9c9c;
  font-size: 23px; 
}
.now_high{
  position: absolute;
  left: 60px;
  display: flex;
  align-items: center;
  line-height: 0;
  height: 0
}
.now_high.after:after{
  content:'实际身高';
  position: absolute;
  top: -64px;
  left: 25px;
  font-size: 23px;
  color: #9c9c9c;
}
.nowSize{
  font-size: 44px;
  margin-left: 5px;
  font-weight: bold;
}
.checkcolor_a{
  color: #2cb9c6
}
.checkcolor_b{
  color: #2cc69d
}
.checkcolor_c{
  color: #67c62c
}
.checkcolor_d{
  color: #9dc62c
}
.checkcolor_e{
  color: #fead37
}
.nowdanwei{
  font-size: 40px;
}
.sanjiao{
  height: 20px;
  width: 20px;
}
.beizhu{
  font-size: 22px;
  color: #6d6d6d;
  display: flex;
  align-items: center;
  justify-content: center;
}
.explain_lable{
  font-size: 26px;
  color: #4B4B4B;
  box-sizing: border-box;
  line-height: 44px;
  padding:0 30px;
  border-left: 2px ;
}

.explain{
  font-size: 26px;
  color: #4b4b4b;
  box-sizing: border-box;
  line-height: 38px;
  padding:0 26px;
  /* margin: 70px 30px 0 30px; */
  border-left: 2px solid #67c62c;
}
.new_margin {
  margin:20px 0;
  line-height:50px;
}
.new_font {
  font-size: 30px;
}
.zengzhong{
  box-sizing: border-box;
  padding: 32px 32px 105px;
  margin-top: 22px; 
  background: #ffffff;
}
.stutas_pd{
padding: 0 10px;
  font-size: 20px;
  color: #fead37;
  border: 1px solid #fead37;
  text-align: center;
  border-radius: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}
.stutas_pg{
padding: 0 10px;
  font-size: 20px;
  color: #2cb9c6;
  border: 1px solid #2cb9c6;
  text-align: center;
  border-radius: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}
.stutas_jg{
padding: 0 10px;
  font-size: 20px;
  color: #2cc69d;
  border: 1px solid #2cc69d;
  text-align: center;
  border-radius: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}
.stutas_pa{
padding: 0 10px;
  font-size: 20px;
  color: #9dc62c;
  border: 1px solid #9dc62c;
  text-align: center;
  border-radius: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}
.divLeft{
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.div_weight{
  width: 56px;
  display: flex;
  height: 112px;
  font-size: 24px;
  background: #75ce3e;
  box-sizing: border-box;
  padding: 0 15px;
  align-items: center;
  justify-content: center;
  color: #75ce3e
}
.div_weight > text{
  color: #ffffff;
}
.divLeft .standard{
  width: 140px;
  left: -140px;
  padding: 0;
  font-size: 35px;
  line-height:40px;
}
.divLeft .nowSize{
  font-size: 44px;
}
.divLeft .nowdanwei{
  font-size: 34px;
}
.divLeft .now_high{
  right: -124px;
}
.div_weight_{
  width: 56px;
  display: flex;
  height: 112px;
  font-size: 24px;
  background: #fead37;
  box-sizing: border-box;
  padding: 0 15px;
  align-items: center;
  justify-content: center;
  color: #fead37
}
.div_weight_ > text{
  color: #ffffff;
}
.divRit{
  width: 46%;
  font-size: 26px;
  color: #4b4b4b;
  display: flex;
  justify-content: center;
  align-items: center;
}
.zengzhong_div{
  display: flex;
  justify-content: space-between;
  margin: 80px 0;
}
.weightBeizhu{
  width: 520px;
  color: #6b6b6b;
  font-size: 22px;
  display: flex;
  margin: auto;
  text-align: center;
}
.div_weight_y{
  width: 56px;
  display: flex;
  height: 226px;
  font-size: 24px;
  background: #75ce3e;
  box-sizing: border-box;
  padding: 0 15px;
  align-items: center;
  justify-content: center;
  color: #75ce3e
}
.div_weight_y > text{
  color: #ffffff;
}
.div_weight_p{
  width: 56px;
  display: flex;
  height: 158px;
  font-size: 24px;
  background: #fead37;
  box-sizing: border-box;
  padding: 0 15px;
  align-items: center;
  justify-content: center;
  color: #fead37;
}
.div_weight_p > text{
  color: #ffffff;
}
.div_weight_3{
  width:100px;
}
.div_weight_3 .now_high.after,.div_weight_31 .now_high.after{
  left:110px
}
.div_weight_3 .now_high .now,.div_weight_31 .now_high .now{
  margin-top:8px;
}
.div_weight_31{
  width:100px;
}
.new1 {
  margin:150px 40px 80px;
  position: relative;
}
.divLeft_new {
  width:100%;
  display:flex;
  align-items:center;
}
.div_weight_new {
  height:60px;
  background: #fead37;
}
.div_weight_new1 {
  height:60px;
  background: #e0e0e0;
}
.divLeft_new_percent {
  margin-top: 20px;
  display: flex;
  color: #353535;
  font-size: 26px;
  justify-content: space-between;
}
.new_left_percent {
  position:absolute;
  top:-90px;
  color:#83c628;
  font-size:66px;
  line-height:32px;
  text-align:center;
}
.new_num {
  position: absolute;
  top:-120px;
  right:-68px;
  font-size:60px;
}
.new_num>text {
  font-size: 40px;
}
.divLeft_new_percent>text {
  width:56px;
}
.divLeft_{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-right:30px;
}
.predict{
  box-sizing: border-box;
  padding: 32px;
  margin-top: 22px;
  background: #ffffff;
}
.yuce{
  color: #4c4c4c;
  font-size: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
}
.predictHigh{
  font-size: 64px;
  color: #75ce3e;
  margin-top: 38px;
  font-weight: bold;
}
.hi{
  font-size: 40px;
  font-weight: normal;
}
.fenxi{
  box-sizing: border-box;
  padding: 32px;
  margin-top: 22px;
  background: #ffffff;
}
.fenxiInfo{
  font-size: 26px;
  color: #4c4c4c;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  }
  .jieguo{
    padding: 20px 60px;
      color: #ffffff;
}
.jieguo{
  display: block;
  padding: 10px 50px;
  color: #ffffff;
  background:#83c628;
  font-size: 48px;
  text-align: center;
  border-radius: 48px;
  margin-top: 61px;
}
.sanjiao_{
  width: 20px;
  height: 20px;
}
.divPos_ .now_high{
  left: 60px;
}
.divPos .now_high{
  left: 60px;
  width:170px;
}
.stutas_high{
  padding:0 10px;
 color: #fead37;
 font-size: 20px;
 border: 1px solid #fead37;
 border-radius: 10px;
 margin-left: 20px;
 margin-bottom: 10px;
}
.youli{
  padding:0 10px;
 color: #83c628;
 font-size: 20px;
 border: 1px solid #83c628;
 border-radius: 10px;
 margin-left: 20px;
 margin-bottom: 10px;
}
.container1 {
  width: 100%;
}
.ec-canvas{
  width: 100%;
  height: 100%;
}
canvas{
  width: 80%;
  height: 680px;
}
.infomation-side{
  position: fixed;
  top:50%;
  left: 50%;
  z-index: 9;
  white-space:inherit;
  transform: translateX(-50%)translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  min-width: 260px;
  max-width: 460px;
  height: auto;
  border-radius: 12px;
  line-height: 1.5;
  padding: 26px;
  font-size: 24px;
  color: #fff;
}
.infomation-side cover-div{
  white-space:inherit;
  line-height:1.4;
}

</style>

<script>
export default {
  name: "contrastInheritHeight",
  props: {
    childId: {
      type: Number,
      default: () => {
        return 0;
      }
    },
    childData: {
      type: Object,
      default: () => {
        return {
          ageNum: undefined,
          avatar: undefined,
          birthday: undefined,
          childId: undefined,
          childType: 1,
          familyCode: undefined,
          height: 0,
          heightDad: 0,
          heightInherit: 0,
          heightMum: 0,
          nickname: undefined,
          sex: 1,
          weight: 0
        };
      }
    },
    childHeightDetailData: {
      type: Object,
      default: () => {
        return {
          inheritHeight: 0,
          inheritHeightStatus: "",
          measuredHeight: {
            value: 0,
            halfYearIncremental: 0,
            halfYearIncrementalStatus: "",
            wholeYearIncremental: 0,
            wholeYearIncrementalStatus: "",
            recordedAt: ""
          },
          currentInheritHeight: {
            value: 0,
            halfYearIncremental: 0,
            wholeYearIncremental: 0,
            recordedAt: ""
          }
        };
      }
    }
  },
  data() {
    return {};
  },

  mounted() {},
  watch: {},
  methods: {}
};
</script>